<template>
  <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="1200"
    :before-close="
      () => {
        dialogVisible = false
      }
    "
  >
    <el-table :data="list" border stripe style="width: 100%" height="500" highlight-current-row>
      <template v-for="item in column" :key="item.Key">
        <el-table-column
          v-if="item.isShow == 'true'"
          align="center"
          :label="item.label"
          :width="item.width"
          height="500"
          show-overflow-tooltip
        >
          <template #default="scope">
            <template v-if="item.isEdit == 'false' && isDate(item.key)">
              <span>{{ formatDate(scope.row[item.key]) }}</span>
            </template>
            <template v-else>
              <!-- 处理下拉框或者输入框 -->
              <template v-if="item.isEdit == 'true'">
                <el-select
                  v-if="item.type == 'select'"
                  v-model="scope.row[item.key]"
                  filterable
                  clearable
                  placeholder="请选择"
                  style="width: 90%"
                >
                  <el-option
                    v-for="_ in item.cmbInfo"
                    :key="_.value"
                    :label="_.label"
                    :value="_.value"
                  />
                </el-select>
                <el-input
                  v-else-if="item.type == 'number'"
                  type="number"
                  v-model="scope.row[item.key]"
                  placeholder="请输入"
                  style="width: 90%"
                />
                <el-date-picker
                  v-else-if="item.type == 'date'"
                  type="date"
                  v-model="scope.row[item.key]"
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  style="width: 90%"
                />
                <el-input
                  v-else
                  type="text"
                  v-model="scope.row[item.key]"
                  placeholder="请输入"
                  style="width: 90%"
                />
              </template>
              <template v-else>
                <span>{{ scope.row[item.key] }}</span>
              </template>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import * as BasicApi from '@/api'
import { objectToQueryParams } from '@/utils/objectToQuery'
import { useMessage } from '@/hooks/useMessage'
const props = defineProps(['type', 'partParams'])

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const dialogVisible = ref(false)
const form = ref({
  items: []
})
const open = (row: any) => {
  form.value.items = row
  dialogVisible.value = true
}
defineExpose({ open })
const emit = defineEmits(['refresh'])
const submitData = reactive<any>({})
const message = useMessage()
const onSave = async () => {
  //格式化数据
  form.value.items.map((item: any) => {
    submitData[item.key] = item.value
  })
  const inputStr = objectToQueryParams({
    groupName: props.partParams.groupName,
    jobType: props.partParams.jobType,
    operType: 'Save'
  })
  const jsonData = {
    listInfo: submitData
  }
  const result = (await BasicApi.WMSOper({ inputStr, jsonData })) as any
  const { code, msg } = result
  if (code !== 200) {
    message.error(msg)
    return
  }
  message.success(msg)
  dialogVisible.value = false
  emit('refresh')
}
</script>
